<template>
  <div :style="{ cursor, userSelect}" class="vue-splitter-container clearfix" @mousemove="onMouseMove">

    <pane class="splitter-pane splitter-paneL" v-show="percent !== 0" :split="split" :style="{ [type]: percent+'%'}">
      <slot name="paneL"></slot>
    </pane>

    <resizer :className="className" :style="{ [resizeType]: tempPercent+'%'}" :split="split" >
      <div slot class="line_btn">
        <div class="splitDom" @mousedown="onMouseDown"  ></div>
        <div v-if="split == 'vertical'" class="button_action_list">
          <img v-if="showLeftBtn" class="first" @click="colseLeft" src="../split-pane/img/mov_btn_vertical.png" alt="" />
          <img v-if="showRightBtn" class="second" @click="colseRight" src="../split-pane/img/mov_btn_vertical.png" alt="" />
        </div>
        <div v-if="split == 'horizontal'" class="button_action_list">
          <img v-if="showLeftBtn" class="first" @click="colseLeft" src="../split-pane/img/mov_btn_horizontal.png" alt="" />
          <img v-if="showRightBtn" class="second" @click="colseRight" src="../split-pane/img/mov_btn_horizontal.png" alt="" />
        </div>
      </div>
    </resizer>

    <pane class="splitter-pane splitter-paneR" v-show="percent !== 100" :split="split" :style="{ [type]: 100-percent+'%'}">
      <slot name="paneR"></slot>
    </pane>
    <div class="vue-splitter-container-mask" v-if="active"></div>
  </div>
</template>

<script>
  import Resizer from './resizer.vue'
  import Pane from './pane.vue'
  export default {
    name: 'splitPane',
    components: { Resizer, Pane },
    props: {
      minPercent: {
        type: Number,
        default: 10
      },
      defaultPercent: {
        type: Number,
        default: 50
      },
      split: {
        validator(value) {
          return ['vertical', 'horizontal'].indexOf(value) >= 0
        },
        required: true
      },
      hiddenLeftBtn: {
        type: Boolean,
        default: false
      },
      hiddenRightBtn: {
        type: Boolean,
        default: false
      },
      className: String
    },
    created() {
      document.addEventListener("mouseup", this.onMouseUp);
    },
    destroyed() {
      document.removeEventListener("mouseup", this.onMouseUp)
    },
    computed: {
      userSelect() {
        return this.active ? 'none' : ''
      },
      cursor() {
        return this.active ? (this.split === 'vertical' ? 'col-resize' : 'row-resize') : ''
      },
      showLeftBtn() {
        return this.percent !== 0
      },
      showRightBtn() {
        if (this.hiddenRightBtn) {
          return this.percent === 0
        }
        return this.percent !== 100
      }
    },
    watch: {
      defaultPercent(newValue){
        this.percent = newValue;
        this.tempPercent = newValue;
      }
    },
    data() {
      return {
        active: false,
        hasMoved: false,
        height: null,
        percent: this.defaultPercent,
        type: this.split === 'vertical' ? 'width' : 'height',
        resizeType: this.split === 'vertical' ? 'left' : 'top',

        oldPercent: 0,

        tempPercent: this.defaultPercent,
      }
    },
    methods: {
      onMouseDown() {
        this.active = true
        this.hasMoved = false
      },
      onMouseUp() {
        if (this.active) {
          this.percent = this.tempPercent;
          this.$emit('resize', this.percent)
        }
        this.active = false
      },
      onMouseMove(e) {
        if (e.buttons === 0 || e.which === 0) {
          this.active = false
        }

        if (this.active) {
          let offset = 0
          let target = e.currentTarget
          if (this.split === 'vertical') {
            while (target) {
              offset += target.offsetLeft
              target = target.offsetParent
            }
          } else {
            while (target) {
              offset += target.offsetTop
              target = target.offsetParent
            }
          }

          const currentPage = this.split === 'vertical' ? e.pageX : e.pageY
          const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight
          const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100

          if (percent > this.minPercent && percent < 100 - this.minPercent) {
            this.tempPercent = percent
          }
          this.hasMoved = true
        }
      },
      colseLeft() {
        if (this.percent === 0 || this.percent === 100) {
          this.percent = this.oldPercent;
          this.tempPercent = this.oldPercent;
          this.oldPercent = 0;
        } else {
          this.oldPercent = this.percent;
          this.percent = 0;
          this.tempPercent = 0;
        }
        this.$emit('resize', this.percent)
      },
      colseRight() {
        if (this.percent === 0 || this.percent === 100) {
          this.percent = this.oldPercent;
          this.tempPercent = this.oldPercent;
          this.oldPercent = 0;
        } else {
          this.oldPercent = this.percent;
          this.percent = 100;
          this.tempPercent = 100;
        }
        this.$emit('resize', this.percent)
      },
    }
  }
</script>

<style scoped>
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.vue-splitter-container {
  height: 100%;
  position: relative;
}

.vue-splitter-container-mask {
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
